<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>中断promise链</title>
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script> -->
  </head>
  <body>
    <!--
         promise的错误穿透：
          （1）当使用promise的then链式调用时，可以在最后用catch指定一个失败的回调
          （2）前面任何操作出了错误，都会传到最后失败的回调中处理
        备注：如果不存在then的链式调用，就不需要考虑then的错误穿透
     -->
    <script>
      // function sendAjax(url, data) {
      //   return new Promise((resolve, reject) => {
      //     // 实例xhr
      //     const xhr = new XMLHttpRequest()
      //     // 绑定监听
      //     let str = ''
      //     for (let key in data) {
      //       str += `${key}=${data[key]}&`
      //     }
      //     str = str.slice(0, -1)

      //     xhr.open('GET', url + '?' + str)
      //     xhr.responseType = 'json'
      //     xhr.send()

      //     xhr.onreadystatechange = () => {
      //       if (xhr.readyState === 4) {
      //         if (xhr.status >= 200 && xhr.status < 300) {
      //           resolve(xhr.response)
      //         } else {
      //           reject('请求出了点问题！！')
      //         }
      //       }
      //     }
      //   })
      // }

      // sendAjax('https://api.apiopen.top/api/getShortVideo?', { page: 0, size: 10 })
      //   .then(
      //     (value) => {
      //       console.log('第一次请求成功', value)
      //       return sendAjax('https://ap3i.apiopen.top/api/getShortVideo?', { page: 1 })
      //     }
      //     // (reason) => {
      //     //   console.log('第一次请求失败', reason)
      //     //   return new Promise((resolve, reject) => {})
      //     // }
      //   )
      //   .then(
      //     (value) => {
      //       console.log('第二次请求成功', value)
      //       return sendAjax('https://api.apiopen.top/api/getShortVideo?', { page: 2 })
      //     }
      //     // (reason) => {
      //     //   console.log('第二次请求失败', reason)
      //     //   return new Promise((resolve, reject) => {}) //中断
      //     // }
      //   )
      //   .then(
      //     (value) => {
      //       console.log('第三次请求成功', value)
      //     }
      //     // (reason) => {
      //     //   console.log('第三次请求失败', reason)
      //     // }
      //   )
      //   .catch((reason) => {
      //     console.log(reason)
      //   })

      // 另一个例子演示错误的穿透
      const p = new Promise((resolve, reject) => {
        setTimeout(() => {
          reject(-1)
        }, 1000)
      })
      p.then(
        (value) => {
          console.log('成功1', value)
          return 'b'
        },
        (reason) => {
          throw reason
        }
      )
        .then(
          (value) => {
            console.log('成功2', value)
            return Promise.reject(-900)
          },
          (reason) => {
            throw reason
          }
        )
        .catch((reason) => console.log('失败了', reason))
    </script>
  </body>
</html>
